86:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 88:T2c2f,[V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { fontFamily: { sans: ["var(--font-geist-sans)"], mono: ["var(--font-geist-mono)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { wobbleLeft: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1.25) rotate(0deg)" }, "50%": { transform: "translate(-50%, -50%) scale(1.25) rotate(var(--tilt-angle))" }, }, wobbleRight: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1.25) rotate(0deg)" }, "50%": { transform: "translate(-50%, -50%) scale(1.25) rotate(var(--tilt-angle))" }, }, wobbleUp: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1.25) rotate(0deg)" }, "50%": { transform: "translate(-50%, -50%) scale(1.25) rotate(var(--tilt-angle))" }, }, wobbleDown: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1.25) rotate(0deg)" }, "50%": { transform: "translate(-50%, -50%) scale(1.25) rotate(var(--tilt-angle))" }, }, lightWobble: { "0%, 100%": { transform: "translate(-50%, -50%) rotate(0deg)" }, "25%": { transform: "translate(-50%, -50%) rotate(-3deg)" }, "75%": { transform: "translate(-50%, -50%) rotate(3deg)" }, }, }, animation: { wobbleLeft: "wobbleLeft 0.3s ease-in-out", wobbleRight: "wobbleRight 0.3s ease-in-out", wobbleUp: "wobbleUp 0.3s ease-in-out", wobbleDown: "wobbleDown 0.3s ease-in-out", lightWobble: "lightWobble 0.3s ease-in-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="styles/animations.css" isMerged="true" @keyframes wobble { 0% { transform: translate(-50%, -50%) scale(1.25) rotate(0deg); } 25% { transform: translate(-50%, -50%) scale(1.25) rotate(5deg); } 50% { transform: translate(-50%, -50%) scale(1.25) rotate(0eg); } 75% { transform: translate(-50%, -50%) scale(1.25) rotate(-5deg); } 100% { transform: translate(-50%, -50%) scale(1.25) rotate(0deg); } } .animate-wobble { animation: wobble 0.5s ease-in-out infinite; } [V0_FILE]typescriptreact:file="market-map.tsx" isEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" interface Position { x: number y: number } interface DraggableLabelProps { initialX: number initialY: number children: React.ReactNode color: string } function DraggableLabel({ initialX, initialY, children, color }: DraggableLabelProps) { const [position, setPosition] = useState({ x: initialX, y: initialY }) const [isDragging, setIsDragging] = useState(false) const [moveDirection, setMoveDirection] = useState(null) const [tiltAngle, setTiltAngle] = useState(0) const [isWobbling, setIsWobbling] = useState(false) const ref = useRef(null) const lastPosition = useRef({ x: initialX, y: initialY }) const lastMoveTime = useRef(0) const moveTimeoutRef = useRef(null) const dropSoundRef = useRef(null) const clickSoundRef = useRef(null) useEffect(() => { dropSoundRef.current = new Audio( "https://rjj2qyxxex49xrmy.public.blob.vercel-storage.com/a_short_and_fun_womp%20(1)-KP9MRnczG1Yn0Er85oaT3beNqA8Hri.mp3", ) clickSoundRef.current = new Audio( "https://rjj2qyxxex49xrmy.public.blob.vercel-storage.com/a_quick_click_sound-fsBeePlfPVSXEf5MiVtaMBPjArwufm.mp3", ) }, []) useEffect(() => { if (isDragging) { document.body.classList.add("dragging") } else { document.body.classList.remove("dragging") } }, [isDragging]) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isDragging && ref.current) { const currentTime = Date.now() const rect = ref.current.parentElement!.getBoundingClientRect() const newX = ((e.clientX - rect.left) / rect.width) * 100 const newY = ((e.clientY - rect.top) / rect.height) * 100 const dx = newX - lastPosition.current.x const dy = newY - lastPosition.current.y const timeDiff = currentTime - lastMoveTime.current const velocity = Math.sqrt(dx * dx + dy * dy) / timeDiff const newTiltAngle = Math.min(Math.max(velocity * 200, 1), 15) setTiltAngle(newTiltAngle) if (Math.abs(dx) > Math.abs(dy)) { setMoveDirection(dx > 0 ? "right" : "left") } else { setMoveDirection(dy > 0 ? "down" : "up") } setPosition({ x: newX, y: newY }) lastPosition.current = { x: newX, y: newY } lastMoveTime.current = currentTime if (moveTimeoutRef.current) { clearTimeout(moveTimeoutRef.current) } moveTimeoutRef.current = setTimeout(() => { setMoveDirection(null) setTiltAngle(0) }, 50) } } const handleMouseUp = () => { setIsDragging(false) setMoveDirection(null) setTiltAngle(0) if (moveTimeoutRef.current) { clearTimeout(moveTimeoutRef.current) } // Start the light wobble effect setIsWobbling(true) setTimeout(() => setIsWobbling(false), 300) // Duration of the wobble effect // Play the drop sound if (dropSoundRef.current) { dropSoundRef.current.currentTime = 0 // Reset the audio to the beginning dropSoundRef.current.play() } document.body.classList.remove("dragging") } if (isDragging) { window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) } return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mouseup", handleMouseUp) if (moveTimeoutRef.current) { clearTimeout(moveTimeoutRef.current) } } }, [isDragging]) const handleMouseDown = (e: React.MouseEvent) => { e.preventDefault() setIsDragging(true) setIsWobbling(false) lastPosition.current = position lastMoveTime.current = Date.now() document.body.classList.add("dragging") // Play the click sound if (clickSoundRef.current) { clickSoundRef.current.currentTime = 0 // Reset the audio to the beginning clickSoundRef.current.play() } } const getWobbleAnimation = () => { if (isWobbling) return "animate-lightWobble" switch (moveDirection) { case "left": return "animate-wobbleLeft" case "right": return "animate-wobbleRight" case "up": return "animate-wobbleUp" case "down": return "animate-wobbleDown" default: return "" } } return (

{children}

) } export default function MarketMap() { return (

{/* Axes */}

{/* Axis Labels */}

Better DX

Worse DX

Less cost-efficient

More cost-efficient

{/* Quadrant Items */}

Serverless Fluid Edge Workers Servers

) } 7c:["$","$L86",null,{"chatId":"uokTkrRUH7E","children":["$","$L87",null,{"data":{"@\"active-block\",\"uokTkrRUH7E\",":{"id":"b_IawmWd65TzF","messageId":"X0UqpLw9ltMnVEszaUMlLIt26BEoDD8s","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"market-map","type":"code-project","project":"market-map"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"uokTkrRUH7E\",":false,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This